﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="rodape.aspx.vb" Inherits="ProjetoDeTestes.rodape" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        html, body
        {
            height: 100%;
        }
        
        #wrap
        {
            min-height: 100%;
            background:#ddd;
            width:800px;
        }
        
        #main
        {
            overflow: auto;
            padding-bottom: 150px;
        }
        #footer
        {
            position: relative;
            margin-top: -150px; 
            height: 150px;
            clear: both;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrap">

	        <div id="main">
                <h1>
                    How to Use the Sticky Footer Code</h1>
                <p>
                    <strong>Be sure to read the <em>Known Issues</em> at the bottom of this page</strong>. It will help prevent a lot of mistakes that can take hours to debug.</p>
                <h2>
                    Introduction</h2>
                <p>
                    There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.</p>
                <p>
                    <a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" rel="nofollow">Ryan Fait's solution</a> is well known, and it works, but it requires an extra &lt;div&gt; with no content in it to provide an extra "push". Some HTML purists may find this a blasphemous use of non-semantic code. Our solution avoids the extra &lt;div&gt;.</p>
                <p>
                    The Sticky Footer solution presented here is based upon the information found in the <a href="http://www.alistapart.com/articles/footers/">Exploring Footers article from A List Apart</a> as well as expands upon the work of <a href="http://themaninblue.com/writing/perspective/2005/08/29/" rel="nofollow">Cameron Adams</a> and <a href="http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/" rel="nofollow">this piece at lwis.net</a>.</p>
                <p>
                    In an early version it applied a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. Instead, after some feedback, this updated version simply uses <em>overflow:auto</em>, suggested by <a href="http://joelpittet.com/">Joel Pittet</a>, to do the same task. <a href="http://www.pmob.co.uk">Paul O'Brian</a> suggested the addition of <em>display:table</em> for IE 8, as well his sticky footer article <a href="http://www.search-this.com/2009/10/09/css-a-sticky-subject/">here</a> got a nice suggestion for a fix in Opera which we used here as well. It's been tested in over 50 browsers and seems to work great.</p>
                <h2>
                    The HTML Code</h2>
                <p>
                    Below is the basic structure of the HTML code. You'll notice how the footer &lt;div&gt; sits <em>outside</em> of the wrap &lt;div&gt;.</p>
            </div>
		    <div id="side">

		    </div>
        </div>

        <div id="footer">

        </div>
    </form>
</body>
</html>
